колесо на Js

[venom1996]

(function() {
const wheel = document.querySelector('.wheel');
const startButton = document.querySelector('.btn1');
var deg = 0;
const input = document.querySelector('#popup-callback-phone');
const inputnames = document.querySelector('#consumers-feedback-names');

startButton.addEventListener('click', () => {
if (input.checkValidity() & inputnames.checkValidity()) {
startButton.style.pointerEvents = 'none';
deg = Math.floor(1000 + Math.random() * 137);
wheel.style.transition = 'all 10s ease-out';
wheel.style.transform = `rotate(${deg}deg)`;
wheel.classList.add('blur');

};
});

wheel.addEventListener('transitionend', () => {
// Удалить размытие
wheel.classList.remove('blur');
// Кнопка включения
startButton.style.pointerEvents = 'auto';
// Кнопка включения когда вращение закончено необходимо установить переход на нет так как мы хотим вращаться мгновенно
wheel.style.transition = 'none';
// Вычислите градус на основе 360 градусов, чтобы получить "естественное" реальное вращение
const actualDeg = deg % 360;
// Вращение без анимации
wheel.style.transform = `rotate(${actualDeg}deg)`;


if (actualDeg > 0 < 45) {
console.log('1подарок');

}else if(actualDeg > 45 <= 90) {

console.log('2подарок');

}else if (actualDeg > 90 < 135) {

console.log('3подарок');

}else if (actualDeg > 135 < 180) {

console.log('4подарок');

}else if (actualDeg > 180 < 225) {

console.log('5подарок');
}else if (actualDeg > 225 < 270) {

console.log('6подарок');
}else if (actualDeg > 270 < 315) {

console.log('7подарок');
}else if (actualDeg > 315 < 360) {

console.log('8подарок');
}


Делаю колесо фортуны для сайта, собственно, как передать данные в картинку ? я пробовал через это условие, если ротация такая то выводи такое, эти данные мне нужно будет потом в crm передавать, подскажите пожалуйста:cray:

[рони]

venom1996,
так напишите свою функцию вместо console.log, которая будет принимать номер картинки и выводить куда нужно.

[venom1996]

там одна целая картинка, в этом и проблема (

[рони]

venom1996,
тогда передавайте позицию картинки. можно только гадать по предоставленной на данный момент информации, что вам конкретно нужно.

[venom1996]

а как передать позицию картинку ? буду очень благодарен если предоставить код

[рони]

venom1996,
условно
function setPos(v)
{
img.style.backgroundPosition = v
}
if (actualDeg > 315 < 360) setPos('0px 30px');

[venom1996]

было бы шикарно если бы вы показали именно на моём примере, так как мои познания в js не значительные

[рони]

было бы шикарно если бы вы показали именно на моём примере,
то что мог, я уже показал.

[venom1996]

к сожалению совсем не то, просто присваивает к картинке свойство backgroundPosition

[рони]

venom1996,
можно только гадать по предоставленной на данный момент информации, что вам конкретно нужно.

:-?

[venom1996]

попытаюсь ещё объяснить, есть цельная картинка с колесом, в ней уже есть призы, то есть они нарисованы, я в js должен создать массив с темы призами которые есть на картинке, что бы потом отправлять их в crm

[рони]

venom1996,
не могу помочь

[venom1996]

if (actualDeg >= 0 && actualDeg <= 45 ) {

gifts = '1';

} else if (actualDeg >= 45 && actualDeg <= 90 ) {

gifts = '2';

} else if (actualDeg >= 90 && actualDeg <= 135) {

gifts = '3';

} else if (actualDeg >= 135 && actualDeg <= 180) {

gifts = '4';

} else if (actualDeg >= 181 && actualDeg <= 225) {

gifts = '5';

} else if (actualDeg >= 225 && actualDeg <= 270) {

gifts = '6';

} else if (actualDeg >= 270 && actualDeg <= 315) {


gifts = '7';

} else if (actualDeg >= 315 && actualDeg < 360) {

gifts = '8';

} else { alert('net podarka');}


решил таким костылём )

[venom1996]

только как мне теперь создать куки при нажатии на кнопку ? что бы окно не появлялось при повторном посещении пользователя ?

[рони]

что бы окно не появлялось при повторном посещении пользователя ?
(function() {
if(localStorage.yes) return;
localStorage.yes = 'yes';
const wheel = document.querySelector('.wheel')

[venom1996]

рони,
нужно что бы у одного пользователь была возможно прокрутить колесо только один раз, то есть создать куку по кнопке с временем 30 дней, что бы в след раз когда он открыл сайт, сам pupup не появлялся, следовать и играть он не сможет

[venom1996]

решил проблему таким путём

(function() {
const wheel = document.querySelector('.wheel');
const startButton = document.querySelector('.btn1');
var deg = 0;
const input = document.querySelector('#popup-callback-phone');
const inputnames = document.querySelector('#consumers-feedback-names');

startButton.addEventListener('click', () => {
if (input.checkValidity() & inputnames.checkValidity()) {
startButton.style.pointerEvents = 'none';
deg = 185;
if(deg >= 181 && deg <= 225) {
deg + 229;
}
wheel.style.transition = 'all 10s ease-out';
wheel.style.transform = `rotate(${deg}deg)`;
wheel.classList.add('blur');


}
});



wheel.addEventListener('transitionend', () => {
//тут делаем куку, которая создаётся при остановке колеса
document.cookie = "played=true;max-age=3600*24*30";
wheel.classList.remove('blur');
startButton.style.pointerEvents = 'auto';
wheel.style.transition = 'none';
var actualDeg = deg % 360;
wheel.style.transform = `rotate(${actualDeg}deg)`;

var gifts;

if (actualDeg >= 0 && actualDeg <= 45 ) {

gifts = '1';

} else if (actualDeg >= 45 && actualDeg <= 90 ) {

gifts = '2';

} else if (actualDeg >= 90 && actualDeg <= 135) {

gifts = '3';

} else if (actualDeg >= 135 && actualDeg <= 180) {

gifts = '4';

} else if (actualDeg >= 181 && actualDeg <= 225) {

gifts = '5';

} else if (actualDeg >= 225 && actualDeg <= 270) {

gifts = '6';

} else if (actualDeg >= 270 && actualDeg <= 315) {


gifts = '7';

} else if (actualDeg >= 315 && actualDeg < 360) {

gifts = '8';

} else { alert('net podarka');}

$.fancybox.open($("#popup-success8"));
document.getElementById("gifts").innerHTML = gifts;

});
})();

$.fancybox.open({
src: "#popup-callbac",
hash: "popup-callbac",
afterClose: function afterClose() {
$("#popup-calc-result .popup__in .main-calc-list").remove();
}
});
//если кука существует, то скрываем попуп
if (getCookie("played")) {
$.fancybox.close();
}